<template>
	<!-- 20250708 左右分栏。group + question + tag。 评分弹窗、拍照、备注、颜色、汇总弹窗。 -->
	<!-- score是扣分 -->
	<!--
	type 1单选/2多选
	对于“符合/不符合”，options为null
	options 多选的选项，db中的格式：已公示许可5:0.5,已公示检查3:0.3,已查2:0.2,未公示:0 。需在前端组装成name/value格式的数组
	answers 勾选的多选答案。没勾选的，或者不是多选题的，此字段为null
	-->
	<view class="u-wrap app">
		<!-- <view class="u-search-box">
			<view class="u-search-inner">
				<u-icon name="search" color="#909399" :size="28"></u-icon>
				<text class="u-search-text">搜索</text>
			</view>
		</view> -->
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
			 :scroll-into-view="itemId">
				<view v-for="(group,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
				 @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{group.description}}</text>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
				<view class="page-view">
					<view class="class-item" :id="'item' + index" v-for="(group, index) in tabbar" :key="index">
						<view class="item-title">
							<text>{{group.description}}</text>
						</view>
						<view class="item-container">
							<view class="thumb-box question-section" v-for="(question, index1) in group.scoreQuestionList" :key="index1">
								<view class="question" @click="openQuestion" :data-item="question" :data-id="question.id"
								:class="question.score ? 'red' : (question.imageUrl || question.remark) ? 'green' : ''">
									<text>{{question.description}}</text>{{ question.score }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-tabbar-height"></view>
			</scroll-view>
		</view>
		
		<view class="" style="position: fixed; bottom: 0; background: #fff; width: 100%;">
			<button @click="submit" type="primary" class="btn btn-primary btn-sm m-btn" v-if="status <= 3" :disabled="disabled">{{buttonText}}</button>
		</view>
		
		<view class="side-bar">
			<view class="side-bar-btn" @click="showSign = true">签</view>
			<view class="side-bar-btn" @click="showMembers = true">组</view>
			<view class="side-bar-btn" @click="openScore">扣</view>
		</view>
		
		<!-- 修改组员 -->
		<u-popup v-model="showMembers" mode="bottom" width="100%" height="200px">
			<view style="padding: 10px;">
				<view class="" style="padding: 10px 20px 4px 4px; display: flex; align-items: center;">
					同组人员：<u-input type="text" border v-model="members" placeholder="同组人员姓名" />
				</view>
				<view class="footer">
					<u-button type="primary" size="medium" @click="saveMembers">保存</u-button>
					<u-button type="default" size="medium" @click="closeMembers">关闭</u-button>
				</view>
			</view>
		</u-popup>
		 <!-- 显示扣分项 -->
		<u-popup v-model="showScore" mode="bottom" width="100%" height="92%">
			<view style="padding: 10px;">
				<view class="page-view" style="padding-bottom: 50px;">
					<view class="class-item" :id="'item' + index" v-for="(question, index) in scoreList" :key="index">
						<view class="item-title">
							<text>{{question.description}}</text>
						</view>
						<view v-if="!!question.imageUrl" class="link" @click="clickImg(question)">查看图片</view>
						<view class="item-container">
							<view class="question" v-if="question.type=='0'">
								<u-radio-group v-model="value" @change="radioGroupChange" >
									<u-radio shape="square" name="a">A</u-radio>
									<u-radio shape="square" name="b">B</u-radio>
								</u-radio-group>
							</view>
							
							<view class="question" v-else-if="question.type=='1'">
								<u-radio-group v-model="question.answers" @change="radioGroupChange2">
									<u-radio shape="square"
										v-for="(item, index) in question.optionsArr" :key="index" 
										:name="item.name"
										icon-size="32" size="48"
										disabled>
										{{item.name}}
									</u-radio>
								</u-radio-group>
							</view>
							
							<view class="question" v-else-if="question.type=='2'">
								<u-checkbox-group :wrap="true" icon-size="32" size="48"
									@change="boxChange">
									<u-checkbox style="margin-bottom: 8px;"
										v-model="item.checked" 
										v-for="(item, index) in question.optionsArr" :key="index" 
										:name="item.name"
										disabled
									>{{item.name}}</u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
						<view class="item-container" style="margin-left: 20rpx; color: #aaa;"> {{question.remark}} </view>
					</view>
				</view>
				<view class="footer" style="margin-top: 20px;  text-align: center;">
					<u-button type="primary" size="medium" @click="showScore = false">关闭</u-button>
				</view>
			</view>
		</u-popup>
		
		<!-- 问题操作窗口 -->
		<u-popup v-model="showQuestion" mode="bottom" width="100%" height="80%">
			<view style="padding: 10px;" v-if="status <= 3">
				<view class="question" :data-item="curQuestion" :data-id="curQuestion.id">
					<text>{{curQuestion.description}}</text>
				</view>
				<view class="ul">
					评分要点：不符合要求将不予评定 {{ curQuestion.remark }}
				</view>
				<view class="question" style="display: flex; justify-content: space-around; align-items: center;">
					<text style="width:40%;">满分：{{curQuestion.scoreDefault}}</text>
					<view class="question question-score" style="width:60%;">
						<view class="input" v-if="status <= 3">
							扣分：<u-input type="digit" class="form-control" border v-model="curQuestion.score" placeholder="扣分" />
						</view>
						<view class="input" v-else>
							<text>扣分：{{ curQuestion.score }}</text>
						</view>
					</view>
				</view>
				
				<view class="question" v-if="curQuestion.type=='0'">
					<u-radio-group v-model="value" @change="radioGroupChange" >
						<u-radio shape="square" name="a">符合</u-radio>
						<u-radio shape="square" name="b">不符合</u-radio>
					</u-radio-group>
				</view>
				
				<view class="question" v-else-if="curQuestion.type=='1'">
					<u-radio-group v-model="curQuestion.answers" @change="radioGroupChange2">
						<u-radio shape="square"
							v-for="(item, index) in curQuestionOptions" :key="index" 
							:name="item.name"
							icon-size="32" size="48">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				
				<view class="question" v-else-if="curQuestion.type=='2'">
					<u-checkbox-group :wrap="true" icon-size="32" size="48"
						@change="boxChange">
						<u-checkbox style="margin-bottom: 8px;"
							v-model="item.checked" 
							v-for="(item, index) in curQuestionOptions" :key="index" 
							:name="item.name"
						>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				
				<view class="question">
					<u-upload ref="upload1"
						:action="uploadAction" 
						:file-list="fileList"
						:header="uploadHeader"
						:max-size="2 * 1024 * 1024" 
						max-count="50"
						@on-choose-complete="chooseComplete"
						@on-success="uploadSuccess"
						@on-error="uploadError"
						@on-uploaded="uploaded"
						@on-remove="delImg"
						:source-type="imageModel==0 ? ['camera'] : ['album']"
					></u-upload>
					<u-radio-group v-model="imageModel">
						<u-radio :name="0" icon-size="32" size="48"> 直接拍照 </u-radio>
						<u-radio :name="1" icon-size="32" size="48"> 从相册选择 </u-radio>
					</u-radio-group>
				</view>
				
				<u-input style='display: none;' v-model="curQuestion.imageUrl" />
				
				<view class="question">
					<u-input type="textarea" border v-model="curQuestion.remark" placeholder="备注" />
				</view>
				
				<view class="" style="margin-top: 20px;  text-align: center;">
					<u-button type="primary" size="medium" @click="showQuestion = false">确定</u-button>
				</view>
			</view>
			<!-- 仅查看 -->
			<view style="padding: 10px;" v-else>
				<view class="item-title">
					<text>{{question.description}}</text>
				</view>
				<view v-if="!!question.imageUrl" class="link" @click="clickImg(question)">查看图片</view>
				<view class="item-container">
					<view class="question" v-if="question.type=='0'">
						<u-radio-group v-model="value" @change="radioGroupChange" >
							<u-radio shape="square" name="a">A</u-radio>
							<u-radio shape="square" name="b">B</u-radio>
						</u-radio-group>
					</view>
					<view class="question" v-else-if="question.type=='1'">
						<u-radio-group v-model="question.answers" @change="radioGroupChange2">
							<u-radio shape="square"
								v-for="(item, index) in question.optionsArr" :key="index" 
								:name="item.name"
								icon-size="32" size="48"
								disabled>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
					<view class="question" v-else-if="question.type=='2'">
						<u-checkbox-group :wrap="true" icon-size="32" size="48"
							@change="boxChange">
							<u-checkbox style="margin-bottom: 8px;"
								v-model="item.checked" 
								v-for="(item, index) in question.optionsArr" :key="index" 
								:name="item.name"
								disabled
							>{{item.name}}</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="item-container" style="margin-left: 20rpx; color: #aaa;"> {{question.remark}} </view>
			</view>
		</u-popup>
		
		<!-- 修改组员 -->
		<u-popup v-model="showSign" mode="bottom" width="100%" :height="qianmingheight">
			<view class="sign-component">
				<qianming @getImg="getSign" @close="closeSign" v-show="showSign" ref="QM" class="QMstyle"></qianming>
			</view>
		</u-popup>
		<!-- 签名 -->
		<!-- <view class="sign-component">
			<qianming @getImg="getSign" @close="closeSign" v-show="showSign" ref="QM" class="QMstyle"></qianming>
			<jushi-signature :settings="settings" @change="signatureChange" @close="closeSign" v-show="showSign2"></jushi-signature>
		</view> -->
	</view>
</template>
<script>
	import config from '@/app.config.js'
	export default {
		watch: {
			showQuestion(newVal, oldVal) {
				if(newVal == false) {
					// console.log('写缓存')
					vk.setVuex('$lhfj.scoreGroupList.'+this.evaluateId+'-'+vk.getVuex('$user.userInfo.userId'), this.paperInfo.scoreGroupList);
				}
			}
		},
		data() {
			return {
				qianmingheight: 0,
				value: 'a',
				imageModel: 0,
				
				evaluateId: '',
				companyId: '',
				recordFormId: '',
				members: '', // 同组人员姓名
				status: 99,
				evaluateInfo:{},
				paperInfo: {},
				disabled: false,
				// action: this.Api + `/upload/uploadPic`,
				act: '',
				buttonText: '提交',
				
				showQuestion: false,
				curQuestion: {},
				curQuestionOptions: [],
				
				scoreList: [], // 显示错题
				
				showScore: false,
				showMembers: false,
				showSign: false, // 签名展示
				signUrl: '', // 签名图片地址
				
				// jushi-signature 签名组件
				showSign2: false, // 签名展示
				settings:{ //签名设置
					width: '750',//签名区域的宽
					height: '500',//签名区域的高
					lineWidth:3,//签名时线宽
					textColor:'#007AFF' //签名文字颜色
				},
				imgUrl: '',
				
				// showLi: false, // 是否显示li
				showLi: [[]], // 是否显示li
				height: '200rpx', // ul的高度
				
				// 以下是页面控制相关属性
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: '', // 栏目右边scroll-view用于滚动的id
				tabbar: [],
				menuItemPos: [],
				arr: [],
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				timer: null, // 定时器
				
				// 图片上传
				imgs1: [],
				// uploadAction: this.$api.uploadAction,
				headers: {},
				uploadFormData: {},
				uploadName: 'image',
				minPicCounts: 1, // 至少上传1张照片
				maxPicCounts: 9, // 最多上传9张照片
				imageDomain: this.$api.imageDomain,
				
				uploadAction: this.$api.uploadAction,
				fileList: [],
				uploadHeader: {},
			}
		},
		onLoad(options) {
			this.initPage(options)
		},
		onReady() {
			this.getMenuItemTop()
		},
		methods: {
			signatureChange(e) {
				console.log('签名图片', e)
				this.imgUrl = e
			},
			radioGroupChange(e) {
				// console.log(e);
				if(e == 'a') this.curQuestion.score = null;
				else if(e == 'b') this.curQuestion.score = 1;
			},
			radioGroupChange2(e) {
				// console.log(e);
				if(!e) this.curQuestion.score = null;
				else{
					let opt = this.curQuestionOptions.find(item => item.name == e)
					// console.log('opt.value', opt.value);
					if(opt.value == this.curQuestion.scoreMax) this.curQuestion.score = null;
					else this.curQuestion.score = this.curQuestion.scoreMax - opt.value;
				}
				// if(!e) this.$set(this.curQuestion, "score", null);
				// else{
				// 	let opt = this.curQuestionOptions.find(item => item.name == e)
				// 	// console.log('opt.value', opt.value);
				// 	if(opt.value == this.curQuestion.scoreMax) this.$set(this.curQuestion, "score", null);
				// 	else this.$set(this.curQuestion, "score", this.curQuestion.scoreMax - opt.value);
				// }
			},
			boxChange(e) {
				// console.log('boxChange', e);
				// console.log(this.curQuestion.optionsArr);
				if(!e){
					this.curQuestion.score = null;
					this.curQuestion.answers = null;
				}
				else {
					let v = 0; // 计算得分
					let arr = this.curQuestionOptions.filter(item => item.checked)
					arr.forEach(item => {
						v = (parseInt(v*100) + parseInt(item.value*100))/100;
					})
					if(v == this.curQuestion.scoreMax) this.curQuestion.score = null;
					else{
						this.curQuestion.score = parseInt((this.curQuestion.scoreMax*100 - v*100))/100;
						
						let s = '';
						arr.forEach(item => {
							s += item.name + ','
						})
						if(!s) this.curQuestion.answers = null;
						else {
							s = s.substring(0, s.length-1);
							this.curQuestion.answers = s
						}
					}
				}
			},
			
			// 打开问题弹窗
			openQuestion(e){
				// console.log('打开问题弹窗', e)
				this.imageModel = 0;
				// this.curQuestion = e.currentTarget.dataset.item
				
				// let id = e.currentTarget.dataset.id
				// this.curQuestion = 
				let cur = e.currentTarget.dataset.item;
				this.curQuestion = this.paperInfo.scoreGroupList.find(g => g.id == cur.groupId).scoreQuestionList.find(q => q.id == cur.id)
				this.curQuestionOptions = this.curQuestion.optionsArr
				
				if(!this.curQuestion.answers) this.curQuestion.answers = '符合'
				
				this.fileList = this.curQuestion.imgUrls
				// if(!this.curQuestion.imageUrl) this.fileList = []
				// else{
				// 	this.fileList = []
				// }
				
				// console.log('弹窗数据', this.curQuestion, this.curQuestionOptions)
				
				this.showQuestion = true;
			},
			
			// 打开错题弹窗
			openScore(){
				this.scoreList = []
				
				let arr = vk.pubfn.deepClone(this.paperInfo.scoreGroupList);
				
				arr.forEach((part, partIndex) => {
					part.scoreQuestionList.forEach((question, index) => {
						if(question.score) this.scoreList.push(question)
					})
				})
				
				this.showScore = true;
			},
			
			toggle(index1,index2){
				this.showLi[index1][index2] = !this.showLi[index1][index2]
				this.$set(this.showLi, index1, this.showLi[index1])
			},
			initPage(options = {}) {				
				if (!options.evaluateId){
					console.log('未传入评价ID！');
					vk.alert('未传入评价ID！');
					return false;
				}
				if(options.evaluateId) this.evaluateId = options.evaluateId;
				
				if(!this.$util.getToken()){
					this.$util.toLogin(()=>this.initPage())
				}
				let tokenStr = this.$util.getToken() ? 'Bearer ' + this.$util.getToken() : '';
				this.uploadHeader = {
					'Authorization': tokenStr
				}
				this.headers = {
					'Authorization': tokenStr
				}
				
				uni.getSystemInfo({
					success: (res) => {
						this.qianmingheight = res.windowHeight - 10 + 'px';
					}
				});
				
				this.getInfo();
			},
			getInfo() {
				let data = {
					id: this.evaluateId,
					expertIds: vk.getVuex('$user.userInfo.userId')
				}
				this.$util.request(this.$api.EvaluateInfo, data, 'GET', null, null, null, null, () => this.getInfo())
					.then(res => {
						if(config.debug) console.log('获取评分详情', res);
						
						if(res.data.status){
							this.status = parseInt(res.data.status);
						}else{
							vk.alert("数据异常！");
							return
						}
						
						this.paperInfo = res.data.form; // 评分表
						this.evaluateInfo = res.data; // 评价信息
						this.members = this.evaluateInfo.members; // 组员
						if(res.data.recordForm){
							this.recordFormId = res.data.recordForm.id;
							this.buttonText = '提交修改';
						}
						
						// 尝试从缓存中拿取问题列表，以应对意外退出的情况。
						// 2025.9.5 只有新建和修改才取缓存
						if(this.status <= 3){
							let vuexScoreGroupList = vk.getVuex('$lhfj.scoreGroupList.'+this.evaluateId+'-'+vk.getVuex('$user.userInfo.userId'));
							if(vuexScoreGroupList.length > 0){
								// console.log('从缓存中拿取了问题列表', vuexScoreGroupList)
								this.paperInfo.scoreGroupList = vuexScoreGroupList
							}
						}
						if(config.debug) console.log("this.paperInfo", this.paperInfo)
						
						// 垂直分栏页面数据
						this.tabbar = this.paperInfo.scoreGroupList
						
						this.showLi = [];
						let show2 = [];
						this.paperInfo.scoreGroupList.forEach((part, partIndex) => {
							show2 = [];
							part.scoreQuestionList.forEach((question, index) => {
								show2.push(false)
								
								// 选择题，处理默认值
								if(['1','2'].includes(question.type)){
									// question.options = "已公示许可:0.5,已公示检查:0.5,未公示:0"
									// 默认勾选有分的。“不涉及”需要单独处理
									question.optionsArr = question.options.split(',').map(item => ({name:item.split(':')[0],value:Number(item.split(':')[1]),checked: question.answers ? (question.answers.indexOf(item.split(':')[0]) >= 0) : item.split(':')[1] != '0' && item.split(':')[0] != '不涉及'}));
									// console.log('question.optionsArr', question.optionsArr);
									// if(question.type == 1) question.answers = question.optionsArr[0].name
								}
								// 处理图片地址，库中是/profile开头的地址，需加上域名才能显示
								if(question.imageUrl){
									question.imgUrls = question.imageUrl.split(',').map(item => ({
										url: this.$api.imageDomain + item
									}))
								}else{
									question.imageUrl = ''
									question.imgUrls = []
								}
							})
							this.showLi.push(show2)
						})
						
						if(config.debug) console.log("this.showLi", this.showLi)
						if(config.debug) console.log("====问题集合", this.paperInfo.scoreGroupList)
						
						uni.setNavigationBarTitle({
							title: this.paperInfo.title
						})
					})
			},
			submit() {
				this.disabled = true;
			
				let submitQuestionList = [];
				let i = 0;
				this.paperInfo.scoreGroupList.forEach((top) => {
					if(top.children){  //有二级分类  -- 2025，不做二级分类，因此不会进入这个分支
						vk.alert('检查项异常，请截图告知管理员');
						// top.children.forEach((second) => {
						// 	second.scoreQuestionList.forEach((question) => {
						// 		// 没扣分的不传后台
						// 		if (question.score) {
						// 			question.questionId = question.id;
						// 			if (question.imgUrls) {
						// 				question.imageUrl = '';
						// 				question.imgUrls.forEach((item) => question.imageUrl += item + ',')
						// 			}
						// 			if (question.imageUrl) {
						// 				question.imageUrl = question.imageUrl.substr(0, question.imageUrl.length - 1);
						// 			}
						// 			// 2021.11.6 将group放入对象，用于在下一页填写扣分说明时显示
						// 			question.groupDescription = second.description
						// 			submitQuestionList[i++] = question;
						// 		}
						// 	})
						// })
					}else{  //无二级分类
						top.scoreQuestionList.forEach((question) => {
							// 没扣分的不传后台
							// 2025。7.23 改为：扣分的传，有图片的也传，有备注的也传
							if (question.score || question.imageUrl || question.remark) {
								question.questionId = question.id;
								// if (question.imgUrls) {
								// 	question.imageUrl = '';
								// 	question.imgUrls.forEach((item) => question.imageUrl += item + ',')
								// }
								// if (question.imageUrl) {
								// 	question.imageUrl = question.imageUrl.substr(0, question.imageUrl.length - 1);
								// }
								// 2021.11.6 将group放入对象，用于在下一页填写扣分说明时显示
								question.groupDescription = top.description
								submitQuestionList[i++] = question;
							}
						})
					}					
				})
				
				let data = {
					id: this.recordFormId,
					evaluateId: this.evaluateInfo.id,
					companyId: this.evaluateInfo.companyId,
					year: this.evaluateInfo.year,
					formId: this.evaluateInfo.formId,
					recordFormId: this.recordFormId,
					// members: this.members,
					expertId: vk.getVuex('$user.userInfo.userId'),
					createBy: vk.getVuex('$user.userInfo.nickName'),
					scoreRecordList: submitQuestionList,
					signUrl: this.signUrl
				}
				if(config.debug) console.log('保存data', data)
				
				// 无论是否扣分，都直接提交到后台
				let method = this.recordFormId ? 'PUT' : 'POST';
				
				this.$util.request(this.$api.RecordFormRestful, data, method, null, null, null, null, () => this.submit())
					.then(res => {
						if(config.debug) console.log('submitForm', res)
						if (res.code === 200) {
							// 删除评分表缓存
							let vuexScoreGroupList = vk.getVuex('$lhfj.scoreGroupList');
							delete vuexScoreGroupList[this.evaluateId+'-'+vk.getVuex('$user.userInfo.userId')]
							vk.setVuex('$lhfj.scoreGroupList', vuexScoreGroupList);
							
							vk.toast("保存成功", "success", 1000, true, () => {
								const eventChannel = this.getOpenerEventChannel();
								if (eventChannel.emit) eventChannel.emit('refresh');
								vk.navigateBack();
							});
						} else {
							console.log('保存失败', res)
							this.disabled = false;
							this.loading = false;
							vk.alert(res.msg, '保存失败');
						}
					}).catch((err) => {
						console.log('保存异常', err)
						this.disabled = false;
						this.loading = false;
						vk.alert(JSON.stringify(err), '保存异常');
					})
			},
			saveMembers(){
				if(!this.members){
					vk.alert('请填写同组人员姓名');
					return
				}
				let data = {
					id: this.evaluateInfo.id,
					members: this.members,
				}
				this.$util.request(this.$api.EditEvaluateMembers, data, 'PUT', null, null, null, null, () => this.saveMembers())
					.then(res => {
						if (res.code === 200) {
							vk.toast("保存成功", "success", 1000, true, () => {
								this.showMembers = false;
							});
						} else {
							console.log('保存失败', res)
							vk.alert(res.msg, '保存失败');
						}
					}).catch((err) => {
						console.log('保存异常', err)
						this.disabled = false;
						this.loading = false;
						vk.alert(JSON.stringify(err), '保存异常');
					})
			},
			closeMembers(){
				this.members = this.evaluateInfo.members;
				this.showMembers = false;
			},
			
			// 选择图片后触发
			chooseComplete(lists, name){
				if(!this.$util.getToken()){
					this.$util.toLogin(()=>this.initPage())
				}
			},
			delImg(index, lists, name) {
				this.curQuestion.imgUrls.splice(index, 1)
				
				let arr = this.curQuestion.imageUrl.split(',')
				arr.splice(index, 1)
				this.curQuestion.imageUrl = arr.toString()
			},
			// 图片上传成功时触发
			uploadSuccess(data, index, lists, name){
				this.curQuestion.imgUrls.push(lists[index])
				this.curQuestion.imageUrl += (this.curQuestion.imageUrl ? ',' : '') + lists[index].response.fileName
				// console.log('====图片上传成功end', this.curQuestion.imageUrl, this.curQuestion.imgUrls, this.fileList)
			},
			// 图片上传失败时触发
			uploadError(data, index, lists, name){
				console.log('图片上传失败', data, index, lists, name)
			},
			// 所有图片上传完毕触发
			uploaded(lists, name){
				console.log('全部图片上传完成', lists, name)
			},
			clickImg(question){
				let urls = question.imageUrl.split(',').map(item => this.$api.imageDomain + item)
				
				uni.previewImage({
					urls
				});
			},
			// 签名回调图片
			getSign(e) {
				this.showSign = false;
				this.signUrl = e;
			},
			// 关闭签名
			closeSign() {
				this.showSign = false;
			},
			
			
			// 以下是页面控制相关方法
			
			// 点击左边的栏目切换
			async swichMenu(index) {
				if(this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if (index == this.current) return;
				this.scrollRightTop = this.oldScrollTop;
				this.$nextTick(function(){
					this.scrollRightTop = this.arr[index];
					this.current = index;
					this.leftMenuStatus(index);
				})
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
						resolve();
					}).exec();
				})
			},
			// 观测元素相交状态
			async observer() {
				this.tabbar.map((val, index) => {
					let observer = uni.createIntersectionObserver(this);
					// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
					// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
					observer.relativeTo('.right-box', {
						top: 0
					}).observe('#item' + index, res => {
						if (res.intersectionRatio > 0) {
							let id = res.id.substring(4);
							this.leftMenuStatus(id);
						}
					})
				})
			},
			// 设置左边菜单的滚动状态
			async leftMenuStatus(index) {
				// console.log('设置左边菜单的滚动状态index', index, this.menuHeight, this.menuItemHeight)
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
				// console.log('设置左边菜单的滚动状态this.scrollTop', this.scrollTop)
			},
			// 获取右边菜单每个item到顶部的距离
			getMenuItemTop() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if(!rects.length) {
							setTimeout(() => {
								this.getMenuItemTop();
							}, 10);
							return ;
						}
						rects.forEach((rect) => {
							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
							this.arr.push(rect.top - rects[0].top);
							resolve();
						})
					}).exec()
				})
			},
			// 右边菜单滚动
			async rightScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
				if(this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if(this.timer) return ;
				if(!this.menuHeight) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
				}
				setTimeout(() => { // 节流
					this.timer = null;
					// scrollHeight为右边菜单垂直中点位置
					let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
					for (let i = 0; i < this.arr.length; i++) {
						let height1 = this.arr[i];
						let height2 = this.arr[i + 1];
						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
							this.leftMenuStatus(i);
							return ;
						}
					}
				}, 10)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	
	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		// width: 200rpx;
		// height: 100%;
		width: 240rpx;
		height: 90%;
	}
	.right-box {
		background-color: rgb(250, 250, 250);
		height: 90%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.class-item:last-child {
		// min-height: 100vh;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		// width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
</style>
<style scoped lang="scss">
	@import url("/static/css/main.css");

	.page {
		height: 100vh;
		background-color: #fff;
	}
	
	.app{
		font-size: 16px;
	}

	.title {
		padding: 10rpx 20rpx;
		background: #1b6fb7;
		color: #ffffff;
	}

	.lan {
		padding: 10rpx 20rpx;
		background: #edf6fb;
	}

	// .question-section {
	// 	padding: 10rpx 0;
	// 	background: #fff;
	// }
	
	// .question-section:nth-child(2n+1) {
	// 	background: #edf6fb;
	// }
	
	.question-section {
		padding: 10rpx 0 20rpx;
		background: #fff;
		border-bottom: 1px dashed #aaa;
	}
	
	.question-score {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.question {
		padding: 10rpx 20rpx;
		width: 100%;
	}

	.input {
		display: flex;
		// flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding-right: 20rpx;
	}

	.m-btn {
		// margin-top: 30upx;
		// margin-bottom: 20upx;
		width: 100%;
		height: 40px;
		font-size: 18px;
		// background-color: #ea8834;
		// border-color: #d27a2e;
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;
	}

	.image-Item {
		width: 160upx;
		height: 160upx;
		margin: 16upx;
		border-radius: 6upx;
	}
	
	.my-add-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40rpx;
		height: 40rpx;
		// background-color: green;
		// color: #fff;
		// border-radius: 50%;
		// box-shadow: 0 0 8px 0 #aaa;
	}
	.rotate-bar{
		transition: .5s transform;
		z-index: 99;
	}
	.rotate{
		transform: rotate(90deg);
		transition: .5s transform;
	}
	.ul{
		padding: 0 20rpx;
		width: 100%;
		height: 0;
		overflow: hidden;
		z-index: 98;
		transition: .5s height;
	}
	.ul.hover{
		height: 200rpx;
		// height: var(--height);
		transition: .5s height;
	}
	.li{
		margin-top:40rpx;
		width: 100rpx;
		height: 40rpx;
		color: green;
		text-align: center;
	}
	.li:first-child{
		margin-top:50rpx;
	}
	
	.red{
		color: red;
	}
	.green{
		color: green;
	}
	
	.uni-system-preview-image{
		
	}
	
	.u-drawer{
		z-index: 998 !important;
	}
	
	.side-bar{
		position: fixed;
		right: 10px;
		bottom: 50px;
	}
	.side-bar-btn{
		margin-bottom: 6px;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		background-color: #1b6fb790;
		border-radius: 10px;
	}
	
	.footer{
		position: fixed;
		bottom: 12px;
		width: 100%;
		height: 40px;
		
		
		display: flex;
		justify-content: space-around;
	}
	
	::v-deep .u-radio__icon-wrap--disabled--checked .u-icon__icon,
	::v-deep .u-checkbox__icon-wrap--disabled--checked .u-icon__icon{
		color: #2979ff !important;
	}
	
	.link{
		margin-right: 10rpx;
		text-align: right;
		color: blue;
		text-decoration: #2979ff underline; 
	}
	
	/* 电子签名相关 */
	.sign-component {
		// position: fixed;
		// top: 0;
		// left: 0;
		// z-index: 99998;
	}
	
	.sign-image-bar {
		margin-left: 12rpx;
		display: inline;
		position: relative;
		overflow: hidden;
		width: 80%;
		height: 50px;
	}
	
	/* .sign-image {
		width: 40px;
		height: 123px;
		transform: rotate(-90deg);
		position: absolute;
		top: -40px;
		left: 40px;
	} */
	.sign-image {
		width: 120px;
		height: 40px;
		position: absolute;
	}
	
	.QMstyle {
		// position: fixed;
		// z-index: 99999;
		// top: 0;
		// left: 0;
	}
</style>
<style>
    .preview{
        margin: 10rpx;
        border: 1rpx solid #aaaaaa;
        border-radius: 10rpx;
    }
    .text {
        margin: 20rpx;
        color: #aaaaaa;
    }
</style>